<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./first/js/moblie.js"></script>
    <link rel="stylesheet" href="./first/js/swiper-bundle.min.css">
    <link rel="stylesheet" href="./first/iconfont/iconfont.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        .clear::after {
            display: block;
            content: "";
            clear: both;
        }

        /* 首页导航栏 */
        html {
            overflow: hidden;
            height: 100%;
        }

        body {
            height: 100%;
            overflow: auto;
        }

        .homepage {
            background-color: rgb(245, 245, 245);
            display: flex;
            display: -webkit-flex;
            min-height: 100vh;
            flex-direction: column;
        }

        .home {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            background-color: rgb(255, 255, 255);
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            z-index: 5;
            top: 0;
        }

        .chinese {
            font-size: 1.75rem;
            color: rgb(76, 76, 76);
            margin-left: 1.25rem;
            line-height: 6.25rem;
        }

        .nav {
            display: flex;
        }

        .man {
            width: 5.78rem;
            height: 3.0137rem;
            color: black;
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(224, 224, 224);
            border-radius: 1rem;
            text-align: center;
            line-height: 3.0137rem;
        }

        .woman {
            width: 5.78rem;
            height: 3.0137rem;
            color: rgb(128, 128, 128);
            background-color: rgb(224, 224, 224);
            border-radius: 1rem;
            text-align: center;
            line-height: 3.0137rem;
            margin-left: -2px;
        }

        .app {
            font-size: 1.75rem;
            font-weight: bold;
            margin-right: 1.25rem;
        }

        /* 本期限免 */
        .free {
            width: 43.8875rem;
            background-color: rgb(255, 255, 255);
            margin: 1.25rem auto;
            border-radius: 5px;
        }

        .limit {
            float: left;
            margin-left: 1.25rem;
            margin-top: 1.25rem;
        }



        .limit span {
            font-size: 2.25rem;
            font-weight: bold;

            padding-left: 2px;
        }

        .time {
            float: left;
            margin-left: 5px;
            margin-top: 1.5rem;
        }

        .time span:nth-child(1) {
            background-color: rgb(229, 53, 62);
            border-radius: 3px;
            color: white;
        }

        .time span:nth-child(2) {
            background-color: black;
            color: white;
            border-radius: 3px;
        }

        .time span:nth-child(3) {
            background-color: black;
            color: white;
            border-radius: 3px;
        }

        .limit2 {
            display: flex;
            justify-content: space-between;
            margin-top: 1.25rem;
            margin-bottom: 1rem;
            padding-bottom: 10px;
            overflow: hidden;
            overflow: scroll;
            overflow-x: auto;

        }

        .limit2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .cover {
            margin-left: 13px;

        }

        .cover div:nth-child(1) img {
            width: 8.5313rem;
            height: 11.5013rem;
            border-radius: 5px;
        }

        .cover div:nth-child(2) {
            width: 8.5313rem;
            font-size: 1.2rem;
            font-weight: bold;
            line-height: 2.5rem;
        }

        .cover div:nth-child(3) {
            color: rgb(204, 204, 204);
        }

        /* 人气免费 */
        .active {
            width: 43.8875rem;
            margin: 1.875rem auto;
            margin-top: 2.5rem;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
        }

        .demand {
            display: flex;
            justify-content: space-between;
            padding-top: 1.25rem;
        }

        .demand div:nth-child(1) {
            font-size: 2.15rem;

            font-weight: bold;
            margin-left: 1.25rem;
        }

        .demand div:nth-child(1) span {
            font-size: 1rem;
            color: rgb(150, 155, 163);
            background-color: rgb(245, 245, 245);
        }

        .demand div:nth-child(2) {
            color: rgb(204, 204, 204);
            font-size: 1.875rem;
            margin-right: 1.25rem;
        }

        .demand2 {
            display: flex;
            margin-top: 1.875rem;
            border-bottom: 1px solid rgb(245, 245, 246);
        }

        .book5 img {
            width: 8.5313rem;
            height: 11.5013rem;
            padding-left: 1.25rem;
        }

        .break3 {
            margin-left: 1.25rem;
        }

        .big {
            font-size: 2rem;
            font-weight: bold;
        }

        .small {
            width: 31.375rem;
            font-size: 1.5rem;
            color: rgb(150, 155, 163);

        }

        .break3 div:nth-child(3) {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .writ {
            font-size: 1.75rem;
            color: rgb(150, 155, 163);

        }

        .ser1 {
            font-size: .625rem;
        }

        .ser1 span:nth-child(1) {
            color: rgb(150, 155, 163);
            background-color: rgb(245, 245, 245);
        }

        .ser1 span:nth-child(2) {
            color: rgb(150, 155, 163);
            background-color: rgb(245, 245, 245);
        }

        .ser1 span:nth-child(3) {
            color: rgb(150, 155, 163);
            background-color: rgb(245, 245, 245);
        }

        /* qq登录 */
        .login {
            width: 51.05rem;
            height: 7.21rem;
         
            text-align: center;
            line-height: 7.21rem;
            border-bottom: 1px solid rgb(204, 204, 204);
        }

        .login span {
            font-size: 2rem;
            font-weight: bold;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

        }

        .login a {
            font-size: 2rem;
            color: rgb(66, 132, 237);
        }

        /* qq阅读 */
        .read {
            
            line-height: 8.75rem;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        .read div {
            font-size: 2rem;
            color: rgb(150, 155, 163);
        }

        /*  */
        .touch {
           
            line-height: 8.75rem;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .touch div {
            font-size: 2rem;
            color: rgb(150, 155, 163);
        }

        .touch div:hover {
            color: black;
        }

        /*  */
        .ser {
           
            text-align: center;
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
            padding-bottom: 7.5rem;
        }

        /* 尾页 */
        .tail {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .below {
            margin: 0 auto;
            width: 42.8813rem;
            text-align: center;
            background-color: rgb(250, 56, 68);
            border-radius: 2.25rem;

        }

        .below span {
            color: white;
            font-size: 1.75rem;
            line-height: 4.2188rem;
        }
        .one{
            margin-top: 6.25rem;
        }
    </style>
</head>

<body>
    <div class="homepage">
        <!-- 首页导航栏 -->
        <div class="home">
            <div class="chinese"><span class="iconfont icon-youjiantou1"></span>免费</div>
            <div class="nav">
                <div class="man">男生</div>
                <div class="woman">女生</div>
            </div>
            <div class="app"><span class="iconfont icon-sousu"></span>
                <span class="iconfont icon-wu"></span>
            </div>
        </div>
        <!-- 限时免费 -->
        <div class="one">
        <div class="free">
            <div class=" clear">
                <div class="limit">
                    <span>本期限免</span>
                </div>
                <div class="time">
                    <span>22</span>:
                    <span>42</span>:
                    <span>34</span>
                </div>

            </div>
            <div class="limit2">
                <div class="cover">
                    <div><img src="./first/img/6/30.webp"></div>
                    <div>从光字片开始的影视...</div>
                    <div>混乱不堪</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/31.webp"></div>
                    <div>赤侠</div>
                    <div>红烧大黑鱼</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/33.webp"></div>
                    <div>灾难降临</div>
                    <div>一行白鹭上...</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/34.webp"></div>
                    <div>我捐献800次，被节...</div>
                    <div>小红花送给...</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/35.webp"></div>
                    <div>神诡：从种出长生果...</div>
                    <div>陆秋</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/36.webp"></div>
                    <div>娱乐：让你录综艺...</div>
                    <div>诸葛猴年</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/37.webp"></div>
                    <div>影帝：每个角色偷练...</div>
                    <div>七薪sf</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/38.webp"></div>
                    <div>大小姐，你是我未来...</div>
                    <div>照雍光明之...</div>
                </div>
            </div>
        </div>
        <!-- 下期免费 -->
        <div class="free">
            <div class=" clear">
                <div class="limit">
                    <span>下期免费</span>
                </div>
            </div>
            <div class="limit2">
                <div class="cover">
                    <div><img src="./first/img/6/awebp.webp"></div>
                    <div>从山海经复苏开始</div>
                    <div>和平鲨鱼</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/bwebp.webp"></div>
                    <div>剑众生</div>
                    <div>离人横川</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/c.webp"></div>
                    <div>做媒这一块，我谁...</div>
                    <div>二蛇</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/d.webp"></div>
                    <div>漫威世界的武神</div>
                    <div>万年路痴</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/e.webp"></div>
                    <div>我是烛中仙</div>
                    <div>能优斯特</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/f.webp"></div>
                    <div>大明孽子</div>
                    <div>南山堂</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/g.webp"></div>
                    <div>轮回模拟：我能逆天...</div>
                    <div>江河载月</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/6/h.webp"></div>
                    <div>全球降临：这领主..</div>
                    <div>太极猫猫拳</div>
                </div>
            </div>
        </div>
    </div>
        <!-- 人气免费 -->
        <div class="active">
            <div class="demand">
                <div>人气免费
                    <span>人气最高的免费作品</span>
                </div>
                <div>更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/6/1.webp"></div>
                <div class="break3">
                    <div class="big">宿命之环</div>
                    <div class="small">诡秘世界第二部。1368之年，七月之末，深红将从天而降。</div>
                    <div>
                        <div class="writ">爱潜水的乌贼</div>
                        <div class="ser1">
                            <span>玄幻</span>
                            <span>连载</span>
                            <span>12.52万字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/6/2.webp"></div>
                <div class="break3">
                    <div class="big">一人之下，五福临门</div>
                    <div class="small">【一人之下同文】至诚君子，得而宝之，即福寿无疆，穿越一人之下的世..</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>汉寿庭猴</div>
                        <div class="ser1">
                            <span>轻小说</span>
                            <span>连载</span>
                            <span>16.83万字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/6/3.webp"></div>
                <div class="break3">
                    <div class="big">谁让他修仙的！</div>
                    <div class="small">“我反复强调，修仙界的风气本来就是歪的，不是我带歪的，都说史书是胜利者...</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>最白的乌鸦</div>
                        <div class="ser1">
                            <span>仙侠</span>
                            <span>连载</span>
                            <span>10.14万字</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新书免费 -->
        <div class="active">
            <div class="demand">
                <div>新书免费
                    <span>第点击最高的免费作品</span>
                </div>
                <div>更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/6/5.webp"></div>
                <div class="break3">
                    <div class="big">无欲之术</div>
                    <div class="small">来阅文旗下网站阅读我的更多作品吧！</div>
                    <div>
                        <div class="writ">精神病研究院长</div>
                        <div class="ser1">
                            <span>武侠</span>
                            <span>连载</span>
                            <span>8327万字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/6/6.webp"></div>
                <div class="break3">
                    <div class="big">魔王的进阶之路</div>
                    <div class="small">身为以为反派，该如何才能摆脱必败的宿命？王凯：我便是宿命，赢的只会是我...</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>混沌.</div>
                        <div class="ser1">
                            <span>奇幻</span>
                            <span>连载</span>
                            <span>1.44万字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/6/7.webp"></div>
                <div class="break3">
                    <div class="big">奇案预备</div>
                    <div class="small">无知的人生最为美好</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>不知梦所云</div>
                        <div class="ser1">
                            <span>都市</span>
                            <span>连载</span>
                            <span>1712万字</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 立即登录 -->
        <div class="login">
            <span>登录后获得更多特色功能 · </span><a href="###">立即登录</a>
        </div>
        <!-- qq阅读 -->
        <div class="read">
            <div>QQ阅读</div>
            <div>红袖添香</div>
        </div>
        <!--  -->
        <div class="touch">
            <div>客户端</div>
            <div>触屏版</div>
            <div>帮助与客服</div>
            <div>搜索</div>
        </div>
        <!--  -->
        <div class="ser">
            <div>网站备案/许可证号：泸B2-20080046-1</div>
            <div>互联网宗教信息服务许可证 编号：泸（2022）00000022</div>
            <div>copyright© 2022-2023 m.qidian.com</div>
        </div>
        <!-- 尾页 -->
        <div class="tail">
            <div class="below">
                <span>下载起点读书，新用户免费读14天</span>
            </div>
        </div>
    </div>
</body>

</html>